<template>
  <div class="courses-nav" id="competition-nav">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :router="true" v-if="roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER' || roles == 'COMMENT_TEACHER' || roles == 'ADMIN'">
      <el-menu-item :disabled="isComment" index="/competitionManagement/config">竞赛设置</el-menu-item>

      <el-menu-item :disabled="isComment || isAdd" index="/competitionManagement/introduce">竞赛介绍</el-menu-item>
      <el-menu-item :disabled="isComment || isAdd" index="/TaskManagement">任务管理</el-menu-item>
      <el-menu-item :disabled="isComment || isAdd" index="/competitionManagement/ManageVirtualMachine">虚机管理</el-menu-item>
      <el-menu-item :disabled="isComment || isAdd" index="/competitionManagement/player">选手管理</el-menu-item>
      <el-menu-item :disabled="isComment || isAdd || isFree" index="/JudgeManagements">评委管理</el-menu-item>
      <el-menu-item :disabled="isAdd || isFree" index="/CompetitionApproval">竞赛审批</el-menu-item>
      <el-menu-item :disabled="isComment || isAdd || isFree" index="/CompetitionRanking">竞赛排名</el-menu-item>
      <el-menu-item :disabled="isComment || isAdd || isFree" index=""  @click="goToLive(isComment || isAdd || isFree)">竞赛实况</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  props: ['websockMsg'],
  data() {
    return {
      activeIndex: '',
      //是否是评委
      isComment: false,
      //是否是添加
      isAdd: false,
      //是否是自由练习
      isFree: false,
    }
  },
  created() {
    let self = this
    //通信
    // self.InitWebSocket()
    // 从状态管理获取roles
    self.roles = self.$store.state.user.roles[0]
    if (self.roles == 'COMMENT_TEACHER') {
      this.isComment = true
    }
    // 导航初始化

    self.fetchDate()
  },
  destroyed: function () {
    //页面销毁时关闭长连接
    // this.over()
  },
  methods: {
    fetchDate() {
      let self = this
      let cur_path
      if (self.$route.matched.length > 4) {
        cur_path = self.$route.matched[3].meta.navActive //获取当前路由
      } else {
        cur_path = self.$route.meta.navActive
      }
      self.activeIndex = cur_path
    },
    //前往竞赛实况
    goToLive(flag){
      if(!flag){
        window.open('/CompetitionLive')
      }
    }
  },
  watch: {
    // $route: 'fetchDate',
    // websockMsg: {
    //   handler: function (newval, oldval) {
    //     let self = this
    //     if (newval.type == 20) {
    //       //开启问题交流
    //       self.InterflowDisabled = false
    //       self.InterflowText = '教师未开启交流模块'
    //       self.$localstorage.putLocalStorage('limts', true) //设置值
    //     } else if (newval.type == 21) {
    //       //关闭问题交流
    //       self.InterflowDisabled = true
    //       self.InterflowText = '教师未开启交流模块'
    //       self.$localstorage.putLocalStorage('limts', false) //设置值
    //     }
    //   },
    //   deep: true,
    // },
  },
}
</script>
<style lang="scss" scoped>
#competition-nav {
  .el-menu-demo {
    .el-menu-item {
      i {
        vertical-align: sub;
        margin-right: 10px;
      }
      &:hover {
        color: #1277eb;
      }
    }
    .is-disabled {
      &:hover {
        color: #474747;
      }
    }
  }
}
</style>

